<template>
  <el-container class="wy-wrapper" v-loading.fullscreen.lock="loadStore.load > 0">
    <el-header height="50px">
        <p class="wy-title1">
          <img class="tubiao" src="/src/assets/hospital.jpg" alt="">
          HIS系统
          <span class="car">
          <img
              style="height: 50px;"
              src="/src/assets/emergence.gif"
              class="moving-image"
          />
        </span>

        </p>
        <div class="wy-title2">
          <p>
            <el-dropdown>
            <span>
              {{employee.get().value.realname}}
              <el-avatar :size="35" :src="getImgPath(employee.get().value.icon)" />
            </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button type="text" @click="toUser"><el-icon><User /></el-icon> 个人首页</el-button>
                  </el-dropdown-item>
                  <el-divider style="margin-top: 2px;margin-bottom: 2px;" />
                  <el-dropdown-item>
                    <el-button type="text" @click="exit"><el-icon><SwitchButton /></el-icon>退出登录</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </p>
        </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <wy-menu/>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>

    <el-footer height="50px" class="wy-title">
      <p>医院地址:天泽省龙江区街道</p>
      <p>邮政编号:10008</p>
      <p class="zhongjian">
        <img class="tubiao" src="/src/assets/hospital.jpg" alt="">
        HIS系统
      </p>
      <p>维修电话:123654897445</p>
      <p>系统报修:4561-52643</p>
    </el-footer>
  </el-container>
</template>

<script setup>
import WyMenu from './menu/index.vue'
import { useLoadStore,EmployeeStore } from '@/stores/counter'
import VueCookie from 'vue-cookie'
import { getImgPath } from "@/util/index.js";
import { get, post } from '@/util/axios'
import { useRouter } from 'vue-router';
import {SwitchButton,User} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter();
const employee=EmployeeStore()
const loadStore = useLoadStore()

function toUser(){
  router.push({
    path:'/user'
  })
}
function exit(){
  ElMessageBox.confirm(
      '是否退出本系统？',
      '温馨提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }).then(() => {
        post('/employee/logout', {phone:employee.get().value.phone},content=>{
          VueCookie.delete("token")
          router.push({
            path:"/"
          })
        })
      }).catch(()=>{

      })
}
</script>

<style scoped lang="scss">
$wyborder: 1px solid #064bcc;
.wy-wrapper {
  height: 100vh;
  .el-header {
    background-color: #f56c6c;
    color: #fff;
    display: flex;
    justify-content: space-between;
    .wy-title1 {
      font-size: 1.125rem;
      font-weight: 700;
      display: flex;
      width: 450px;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      .tubiao{
        width: 5%;
        border-radius: 30%;
        margin-right: 5px;
      }
      .icon{
        margin-right: 0;
      }
      .car{
        height: 50px; /* 图片的高度 */
        width: 300px;
        overflow: hidden; /* 隐藏图片溢出部分 */
        position: relative;
        margin-left: 30px;
        .moving-image {
          position: absolute;
          animation: move-horizontal 8s linear infinite;
        }

        @keyframes move-horizontal {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(600%);
          }
        }
      }

    }
    .wy-title2 {
      font-size: 1.125rem;
      font-weight: 700;
      display: flex;
      width: 150px;
      margin-left: 40px;
      justify-content: right;
      align-items: center;
      text-align: center;
      span{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-right: 10px;
        margin-left: 10px;
        font-size: 17px;
        color: white;
      }
    }
  }
  .el-aside {
    border-right: $wyborder;
  }
  .el-footer {
    background-color: #f56c6c;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 50px;
    p {
      font-size: 1.125rem;
      font-weight: 700;
      margin: 0 30px;
      display: flex;
      align-items: center;
    }
    .tubiao {
      width: 30px;
      height: 30px;
      border-radius: 30%;
      margin-right: 5px;
    }
  }

}
</style>
